{extend name="article:base" /}
{block name="info"}{/block}

{block name="content"}
<hr>
<div class="clear"></div>
<div>
    <style>
        .detail_container{
            width: 1200px !important;
        }
        iframe{
            width: 100%;
            height: 700px;
        }
        .span{
            width: 100%;
            min-height: 200px;
            text-align: left;
            background: #0b4411;
            color: #fff;
            font-size: 16px;
            padding: 15px;
        }
        h3{
            text-align: left;
            font-size: 22px;
            font-weight: 600;
        }
        .detail_container .content pre{
            padding-top: 20px;
            line-height: 20px;
        }

    </style>

    {if $video.type_id == 1}
    {:htmltomarkdown($video.content)}
    {/if}
    {if $video.type_id == 2} {//来源本地}
    <link href="{:config('web.cdn')}/static/js/videojs/video-js.min.css" rel="stylesheet">
    <script src="{:config('web.cdn')}/static/js/videojs/video.min.js"></script>

    <video
            id="my-player"
            class="video-js"
            controls
            preload="auto"
            poster="{:img_thumber($article.prefimg,448,960)}"
            data-setup='{}'>
        <source src="{:htmltomarkdown($video.content)}" type="video/mp4"></source>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>

    <script>
        var options = {};
        var player = videojs('my-player', options, function onPlayerReady() {
            videojs.log('Your player is ready!');

            // In this context, `this` is the player that was created by Video.js.
            this.play();

            // How about an event listener?
            this.on('ended', function() {
                videojs.log('Awww...over so soon?!');
            });
        });
    </script>

    {/if}


    <div class="span">
        <h3>视频介绍</h3>
        <hr>
        <pre>{$video.desc}</pre>
    </div>
</div>
{/block}

{block name="right"}{/block}